<template>
  <div class="bg-card border border-border rounded-lg p-4 sm:p-6 shadow-sm">
    <!-- 用户头像 -->
    <div class="flex justify-center mb-3 sm:mb-4 relative">
      <div class="w-16 h-16 sm:w-20 sm:h-20 bg-primary/10 rounded-full flex items-center justify-center">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
        </svg>
      </div>
    </div>

    <!-- 用户信息 -->
    <div class="text-center mb-4 sm:mb-6">
      <div class="flex items-center justify-center gap-2 mb-1 flex-wrap">
        <h3 class="text-lg sm:text-xl font-semibold text-foreground">{{ user.name }}</h3>
        <!-- 管理员标签 -->
        <span
          v-if="user.isAdmin"
          class="inline-flex items-center px-1.5 py-0.5 sm:px-2 sm:py-1 rounded-full text-xs font-medium bg-gradient-to-r from-amber-500 to-orange-500 text-white shadow-sm">
          <svg class="w-2.5 h-2.5 sm:w-3 sm:h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3l14 9-14 9V3z" />
          </svg>
          {{ t('user.admin') }}
        </span>
      </div>
      <p class="text-text-secondary text-xs sm:text-sm">{{ t('user.userId') }}: {{ user.id.slice(0, 8) }}...</p>
    </div>

    <!-- 登录按钮 -->
    <button
      :disabled="loading"
      class="w-full py-2.5 sm:py-3 bg-primary text-primary-foreground rounded-md hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
      @click="$emit('login', user)">
      <span v-if="loading" class="flex items-center justify-center">
        <div class="animate-spin rounded-full h-3 w-3 sm:h-4 sm:w-4 border-b-2 border-white mr-2"></div>
        {{ t('user.loggingIn') }}
      </span>
      <span v-else>{{ t('user.loginButton') }}</span>
    </button>
  </div>
</template>

<script setup lang="ts">
import { UserInfo } from '@shared/types.d';

import { t } from '@/i18n';

interface Props {
  user: UserInfo;
  loading?: boolean;
}

defineProps<Props>();
defineEmits<{
  login: [user: UserInfo];
}>();
</script>
